Page({
  data: {
    scrollLeft: 0,  // 当前滚动位置
    currentLevel: 1,  // 当前等级
    progress: 50,  // 进度
    cardWidth: 0,  // 每个卡片的宽度
    translateX: 0,  // 用来控制卡片滑动的距离
    card: [
      { level: 1, value: 500 },
      { level: 2, value: 1000 },
      { level: 3, value: 3000 },
      { level: 4, value: 5000 },
      { level: 5, value: 6000 },
      { level: 6, value: 7000 },
      { level: 7, value: 9000 },
      { level: 8, value: 10000 },
      { level: 9, value: 20000 }
    ],
    lastScrollLeft: 0,  // 上次滚动的位置，用来判断滑动方向
    isScrolling: false  // 是否正在滚动，防止重复滚动
  },

  onLoad: function () {
    // 获取卡片的宽度（适应不同设备）
    this.setCardWidth();
  },

  // 获取卡片的宽度
  setCardWidth: function () {
    const query = wx.createSelectorQuery();
    query.select('.card').boundingClientRect((rect) => {
      if (rect) {
        this.setData({
          cardWidth: rect.width  // 获取卡片宽度
        });
      }
    }).exec();
  },

  onScroll: function (e) {
    const scrollLeft = e.detail.scrollLeft;  // 当前滚动位置
    const cardWidth = this.data.cardWidth;
    const direction = (scrollLeft > this.data.lastScrollLeft) ? 'right' : 'left';
  
    // 判断是否滑动超过卡片宽度的80%，避免频繁触发卡片切换
    const threshold = cardWidth * 0.8;
    if (Math.abs(scrollLeft - this.data.lastScrollLeft) > threshold && !this.data.isScrolling) {
      let nextIndex = Math.floor(scrollLeft / cardWidth);
  
      // 根据滑动方向决定是向右滚动到下一个，还是向左滚动到上一个
      if (direction === 'right' && nextIndex < this.data.card.length - 1) {
        nextIndex++;
      } else if (direction === 'left' && nextIndex > 0) {
        nextIndex--;
      }
  
      // 更新 translateX 控制卡片滑动
      this.setData({
        translateX: nextIndex * cardWidth * -1,  // 向左滑动卡片
        isScrolling: true,
        lastScrollLeft: scrollLeft
      });
  
      // 滚动结束后，恢复状态
      setTimeout(() => {
        this.setData({
          isScrolling: false
        });
      }, 300);  // 防止滚动太快
    } else {
      // 更新当前滚动位置
      this.setData({
        lastScrollLeft: scrollLeft
      });
    }
  },

  // 跳转页面
  goTo(e) {
    const currentUrl = e.currentTarget.dataset.url;
    const isTabBar = e.currentTarget.dataset.isTabBar;
    if (isTabBar) {
      wx.switchTab({
        url: currentUrl,
        fail: (err) => {
          console.error("跳转失败:", err);
          wx.showToast({
            title: '跳转失败',
            icon: 'none'
          });
        }
      });
    } else {
      wx.navigateTo({
        url: currentUrl,
        fail: (err) => {
          console.error("跳转失败:", err);
          wx.showToast({
            title: '跳转失败',
            icon: 'none'
          });
        }
      });
    }
  }
});
